<template>
	<view class="content" :style="'background:#f7f7f7;'">
		<text class="top-title" :style="'color:#111111;'">设置快捷加粉</text>
		<view class="add-new-config-btn" :style="'background:#E9564F;'" @click="goToaddNewConfig(0)">
			<image src="../../../static/add_fans.png" mode=""></image>
			<text class="btn-text" :style="'color:#FFFFFF;'">添加新设置</text>
		</view>
		<view class="add-new-config-btn" :style="'border:2rpx solid #E9564F;'" @click="goToBack">
			<text class="btn-text" :style="'color:#E9564F;'">不设置</text>
		</view>
		<view class="other-item" :class="is_active?'active-other':'no-active-other'" v-if="diversion.diversion_type ==1" :style="'background:#FFFFFF;'" >
			<view class="item-left" >
				<image src="../../../static/wxicon.png" mode=""></image>
				<text class="item-text" :style="'color:#111111;'">{{diversion.diversion_name}}</text>
			</view>
			<image class="three-dian" src="../../../static/dididi.png" @click="openEditPopup(1)" mode=""></image>
		</view>
		<view class="other-item" :class="is_active?'active-other':'no-active-other'" v-if="diversion.diversion_type ==2" :style="'background:#FFFFFF;'" >
			<view class="item-left">
				<image src="../../../static/xiaochengxu.png" mode=""></image>
				<text class="item-text" :style="'color:#111111;'">{{diversion.diversion_name}}</text>
			</view>
			<image class="three-dian" src="../../../static/dididi.png" @click="openEditPopup(2)" mode=""></image>
		</view>
		<view class="other-item" :class="is_active?'active-other':'no-active-other'" v-if="diversion.diversion_type ==3" :style="'background:#FFFFFF;'" >
			<view class="item-left">
				<image src="../../../static/gongzhognhao.png" mode=""></image>
				<text class="item-text" :style="'color:#111111;'">{{diversion.diversion_name}}</text>
			</view>
			<image class="three-dian" src="../../../static/dididi.png" @click="openEditPopup(3)" mode=""></image>
		</view>
		<view class="other-item" :class="is_active?'active-other':'no-active-other'" v-if="diversion.diversion_type ==4" :style="'background:#FFFFFF;'" >
			<view class="item-left">
				<image src="../../../static/wxicon.png" mode=""></image>
				<text class="item-text" :style="'color:#111111;'">{{diversion.diversion_name}}</text>
			</view>
			<image class="three-dian" src="../../../static/dididi.png" @click="openEditPopup(4)" mode=""></image>
		</view>
		<uni-popup ref="openitemEdit" type="bottom">
			<view class="publicpopup" >
				<view class="condition-list" :style="'background:#FFFFFF;'">
					<view class="item1" :style="'border-bottom:2rpx solid #EBEBEB;'" @click="goToaddNewConfig(2)">
						<text>编辑</text>
					</view>
					<view class="item1" :style="'border-bottom:2rpx solid #EBEBEB;'">
						<text>删除</text>
					</view>
				</view>
				<view class="" style="width: 750rpx;height: 20rpx;" :style="'background:#EBEBEB;'"></view>
				<view class="condition-item2" :style="'background:#FFFFFF;'" @click="$refs.openitemEdit.close()">
					<text>取消</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				config_data:[],
				item_index:1,
				diversion:{},
				is_active:true
			};
		},
		onLoad() {
			this.config_data = this.$store.state.add_fans_config
			console.log(this.config_data)
		},
		onShow() {
			this.diversion = this.$store.state.diversion
		},
		methods:{
			openEditPopup(index){
				this.item_index = index
				this.$refs.openitemEdit.open()
			},
			goToBack(){
				uni.navigateBack({})
			},
			goToaddNewConfig(type){
				this.$refs.openitemEdit.close()
				if(type == 3){
					uni.navigateTo({
						url:'addFansConfig?index='+this.item_index
					})
				}else{
					uni.navigateTo({
						url:'addFansConfig?index=0'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.condition-item2{
		width: 750upx;
		display: flex;
		align-items: center;
		padding: 36upx 0;
		justify-content: center;
	}
	.condition-list{
		display: flex;
		align-items: center;
		flex-direction: column;
		width: 750upx;
		box-sizing: border-box;
		padding: 0 30upx;
		border-radius: 20upx 20upx 0px 0px;
		.item1{
			display: flex;
			align-items: center;
			padding: 36upx 0;
			width: 750upx;
			justify-content: center;
		}
	}
	.publicpopup{
		display: flex;
		align-items: center;
		flex-direction: column;
	}
	.active-other{
		border: 2upx solid #E9564F;
	}
	.no-active-other{
		border: none;
	}
	.other-item{
		width: 690upx;
		height: 92upx;
		border-radius: 20upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding:  0 30upx;
		.three-dian{
			width: 48upx;
			height: 12upx;
		}
		.item-left{
			display: flex;
			align-items: center;
			.item-text{
				font-size: 30upx;
			}
			image{
				width: 41upx;
				height: 41upx;
				margin-right: 19upx;
			}
		}
	}
	.add-new-config-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		margin-bottom: 30upx;
		border-radius: 20upx;
		.btn-text{
			font-size: 34upx;
			font-weight: 500;
		}
		image{
			width: 33upx;
			height: 33upx;
		}
		
	}
	.top-title{
		font-size: 30upx;
		width: 100%;
		margin-bottom: 30upx;
	}
	.content{
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		align-items: center;
		width: 750upx;
		background: #F7F7F7;
		font-family: PingFang SC;
		box-sizing: border-box;
		padding: 30upx;
	}
</style>
